<template>
  <div class="tab">
    <van-tabs
      color="#FF8198"
      title-active-color="#FF8198"
      v-model:active="activeName"
      @click="checkout"
      sticky
    >
      <van-tab
        v-for="(item, index) in porps.tablist"
        :key="index"
        :title="item"
        name="a"
      >
        <div class="w-100 d-flex flex-warp justify-space-around con">
          <!-- 图片每一项 -->
          <div
            class="item d-flex flex-direction-column"
            v-for="item in state.goods"
            :key="item.iid"
            @click="todetail(item.iid)"
          >
            <!-- 图片 -->
            <van-image :src="item.img">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>

            <div>
              <!-- 商品标题 -->
              <p class="omitted title">{{ item.props[0] }}</p>
              <p class="price text-center">
                <span>￥{{ item.price }}</span>
                <van-icon class="icon" name="star-o" />
                {{ item.cfav }}
              </p>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup="props">
import { reactive, ref, getCurrentInstance, defineProps } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { category, miniWallkey } from "@/utils/http.js";
// 逻辑
const porps = defineProps({
  tablist: {
    type: Array,
    default: () => [],
  },
});
const store = useStore();
const ctx = getCurrentInstance();
const router = useRouter();
const activeName = ref("a");
const state = reactive({
  goods: [],
  pop: [],
  new: [],
  sell: [],
});
const checkout = (number, name) => {
  if(name == '新款'){
    state.goods = state.new
  }else if(name == '流行'){
    state.goods = state.pop
  }else{
    state.goods = state.sell
  }
};
const todetail = (id) => {
  router.push("/detail/" + id);
  // store.commit("setstatus", false);
};

const recomment = async (id, type) => {
  if (type == "pop") {
    const { data: res } = await miniWallkey(id, type);
    state.pop = res;
    state.goods = res;
  } else if (type == "new") {
    const { data: res } = await miniWallkey(id, type);
    state.new = res;
  } else {
    const { data: res } = await miniWallkey(id, type);
    state.sell = res;
  }
};
recomment(10062603, "pop");
recomment(10062603, "new");
recomment(10062603, "sell");
</script> 

<style scoped lang="scss">
.tab {
  margin-bottom: 44px;
  padding-left: 10px;
}
.item {
  width: 48%;
  display: flex;
  justify-content: space-between;
}
.title {
  font-size: 12px;
  color: #666666;
}
/* 价格 */
.price {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  span {
    color: #ff8198;
  }
  .icon {
    margin: 0 5px;
    padding-bottom: 3px;
  }
}
</style>